跳到主要内容

网格(Meshes)

网格允许您通过移动顶点来变形光栅图像,而不是将图像作为平面矩形进行变换。它适用于自然运动效果,如皮肤弯曲、布料波动、头发飘动,或创建仿 3D 效果。

网格由轮廓构建,轮廓定义了网格的形状和顶点。Rive 使用该轮廓在图像上创建三角化表面。

为图像添加网格(Adding a Mesh to an Image)

  1. 在舞台或层级中选中一个图像,按 Enter 键,或转到检查器中的 Deform 部分。

  2. 点击 + 按钮,然后选择 Mesh

在检查器的 Deform 面板中点击加号图标并选择 Mesh

变形网格(Deforming a Mesh)

V 键或取消选中 Edit Contour 可进入网格编辑模式。

在网格编辑模式下,移动一个顶点会改变与该顶点相连的所有三角形的形状,并变形这些三角形内的像素。未与被移动顶点相连的三角形中的像素不受影响。

以下是一个简单的网格,由四个顶点分成两个三角形:

以下是一个稍复杂的网格,有一个中心顶点,将图像分成四个三角形:

这些顶点的位置可以在时间线上设置关键帧,也可以由骨骼控制

轮廓(Contours)

轮廓定义了网格的可见形状和顶点结构。编辑轮廓会改变网格结构,但不会变形图像。

创建轮廓(Creating Contours)

当您为图像添加网格时,Rive 会自动创建一个简单的轮廓,包含四个顶点,形成两个三角形。您可以将此轮廓作为起点,也可以自行创建。

手动创建新轮廓

点击 New Contour 按钮可以从头绘制一个新轮廓。

当默认轮廓与图像形状不匹配,或者您想要完全控制网格结构时,这很有用。

自动追踪新轮廓

使用 Auto-Trace 可以快速创建一个跟随图像可见形状的轮廓。

调整以下设置来控制生成的轮廓:

  • Detail(细节) — 轮廓跟随图像中小细节的紧密程度。
  • Concavity(凹度) — 轮廓跟随内曲线的深度。
  • Uniform(均匀度) — 顶点沿轮廓分布的均匀程度。
  • Alpha(透明度) — 用于检测图像边缘的透明度阈值。
  • Padding(边距) — 在追踪轮廓周围添加的额外空间。

轮廓边界(Contour Bounds)

只有轮廓内的区域会被渲染。轮廓外的任何内容都会被隐藏。

当您想从同一图像的不同部分创建多个网格时,这很有用。

编辑轮廓(Editing Contours)

使用 Edit Contour 或按 P 键可以调整现有轮廓。网格钢笔工具允许您添加新顶点或移动现有顶点,而不会扭曲图像。

连续点击可以在顶点之间创建强制边。在点击之间按 Esc 键可以创建独立的顶点,让 Rive 自动生成它们之间的边。

强制边(Forced Edges)

强制边是您在网格顶点之间手动添加的边。当您需要更多控制网格结构时使用强制边,例如定义重要的接缝、折痕、拐角,或网格三角形应遵循特定路径的区域。

使用网格钢笔工具时,连续点击可以创建带强制边的连接顶点。

强制边在网格中显示为较粗的线。

网格中的强制边

要移除强制边,选择 Edit Contour,然后在 macOS 上按住 Cmd 点击该边,或在 Windows 上按住 Ctrl 点击该边。

生成(Generate)

使用 Generate 可以为当前网格添加更多顶点。多次点击 Generate 可以增加网格复杂度。

更复杂的网格可以创建更平滑的变形,但也可能更难编辑。

重置轮廓(Resetting a Contour)

使用 Reset 可以将网格恢复为默认轮廓。

管理网格(Managing Meshes)

复制网格(Copying a Mesh)

您可以复制一个网格并将其应用到另一个图像上。

  1. 选中包含要复制网格的图像,在 macOS 上按 Cmd + C,或在 Windows 上按 Ctrl + C

  2. 选中要应用网格的图像,在 macOS 上按 Cmd + P,或在 Windows 上按 Ctrl + P 粘贴网格。

替换图像(Swapping Images)

更换图像后,网格可以继续工作。

当多个图像共享相同的基本结构时,这很有用。同一个网格可以变形每个面孔,而无需为每个图像创建单独的网格。

移除网格(Removing a Mesh)

图像添加网格后,Deform 部分会显示编辑或移除网格的选项。

  1. 在舞台或层级中选中一个图像,按 Enter 键,或转到检查器中的 Deform 部分。

  2. 点击 Edit MeshRemove Mesh 按钮。

⚠️

移除网格会删除该图像的网格及其顶点编辑。

网格视图选项(Mesh View Options)

网格视图选项控制编辑时网格和图像的显示方式。这些选项可以让您更轻松地专注于顶点、边、权重或变形结果。

网格视图选项

  • Bounding Box Edit(边界框编辑) — 显示选中顶点周围的边界框,以便一起变换它们。
  • Isolate(隔离) — 仅显示正在编辑的图形。
  • Show Weights(显示权重) — 编辑时显示网格权重。
  • Deform(变形) — 在变形和未变形版本的图像之间切换。
  • Show Triangles(显示三角形) — 显示或隐藏三角形边。禁用时,仅显示顶点。
  • Dim(调暗) — 调暗图像,使网格更容易看清。